"use strict"

for st in ShapeTypes 
  do (st) ->
    onNewShape = () -> newShape(st)
    btn = $("<button id='new-#{st.type}'>#{st.type}</button>").click(onNewShape)
    $('#shape-buttons').append(btn)

onMove = (shape, ex) ->
  global.target = global.dropableList.findTarget(shape, ex)
  global.dropableList.highlightTarget(global.target, shape)

onMoveEnd = (shape) ->
  console.log(JSON.stringify(shape.toHash()))
  global.dropableList.highlightTarget()
  do (t = global.target) ->
    if t?.settings.type == 'trash'
      global.dropableList.remove shape
      shape.remove()
    else if t then shape.setParent(t)
    else shape.resetParent()

onResize = (d) ->
  console.log('resize', d)

newShape = (s) ->
  settings = $.extend(true, {}, s, {
    bounding_w: global.bounding_w,
    bounding_h: global.bounding_h,
    behavior: {
      move: {
        x: global.move_x,
        y: global.move_y
      },
      resize: {
        x: global.resize_x,
        y: global.resize_y
      }
    },
    callbacks: {
      onMove: onMove,
      onMoveEnd: onMoveEnd,
      onResize: onResize
    }
  })
  shape = new Shape(global.page, settings)
  global.dropableList.add(shape)
  shape

global.page = d3.select("body").append("svg")
  .attr("width", global.bounding_w)
  .attr("height", global.bounding_h)

x = d3.scale.linear()
  .domain([0, global.bounding_w / 20])
  .range([0, global.bounding_w]);
y = d3.scale.linear()
  .domain([0, global.bounding_h / 20])
  .range([0, global.bounding_h]);

grid_lines = global.page.append('g').classed('grid-lines', true).style('display', 'none')
grid_lines.selectAll('line.grid_x')
  .data(x.ticks(global.bounding_w / 20))
  .enter().append('line')
  .classed('grid_x', true)
  .attr('x1', x)
  .attr('x2', x)
  .attr('y1', 0)
  .attr('y2', global.bounding_h)
  .style('stroke', '#888')
  .style('stroke-width', .1)
grid_lines.selectAll('line.grid_y')
  .data(y.ticks(global.bounding_h / 20))
  .enter().append('line')
  .classed('grid_y', true)
  .attr('x1', 0)
  .attr('x2', global.bounding_w)
  .attr('y1', y)
  .attr('y2', y)
  .style('stroke', '#888')
  .style('stroke-width', .1)

global.dropableList = new DropableList()


shape_type = 'page'
settings = _.find(ShapeTypes, (st) -> st.type == shape_type)
s0 = new Shape(global.page, $.extend(true, {}, settings, { 
  type: shape_type,
  bounding_w: global.bounding_w,
  bounding_h: global.bounding_h,
  behavior: { move: { x: false, y: false }, resize: { x: false, y: false } },
}))
global.dropableList.add(s0)

shape_type = 'trash'
settings = _.find(ShapeTypes, (st) -> st.type == shape_type)
s1 = new Shape(global.page, $.extend(true, {}, settings, { 
  type: shape_type,
  bounding_w: global.bounding_w,
  bounding_h: global.bounding_h,
  behavior: { move: { x: false, y: false }, resize: { x: false, y: false } },
}))
global.dropableList.add(s1)

# _.each((s for s in ShapeTypes when s.type != 'page' && s.type != 'trash'), (s, idx) ->
#   do (s, idx, settings = {}) ->
#     onMoveStart = (s) -> 
#       console.log 'start', idx, settings
#       settings.type == 'view' && global.dropableList.add(s)
#       new Shape(page, settings)
#     settings = $.extend(true, {}, s, { x: global.bounding_w - 49, w: 49, y: 30 * idx, h: 30 - 1, callbacks: {
#       bounding_w: global.bounding_w,
#       bounding_h: global.bounding_h,
#       onMove: onMove,
#       onMoveEnd: onMoveEnd,
#       onResize: onResize
#       onMoveStart: onMoveStart
#       }})
#     new Shape(global.page, settings)
# )